前一篇第 8 天是提到「在 SwiftUI 如何使用 safeAreaInset 建立貼於底部的 UI」，和今天分享的內容有相關，如果你是還沒讀過前一篇的讀者，也推薦你去讀讀。

初始程式碼

假使我們有一個這樣子的 UI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.blue
                .opacity(0.2)
            Text("2023 iThome 鐵人賽")
                .font(.title)
        }
    }
}

執行或在 Xcode 裡預覽後，畫面就會像這樣。可以發現上下會有空隙。那就是因為一般來說， UI 元件只會延展到 Safe Area 的界線為止。

設定 .infinity

有時候根據 UI 結構視覺上可能可以用這個方式解決，但是當這個方式還是無法解決時，還是需要試試看能不能用 ignoresSafeArea 解決

.frame(maxWidth: .infinity, maxHeight: .infinity)

加入 .ignoresSafeArea

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.blue
                .opacity(0.2)
            Text("2023 iThome 鐵人賽")
                .font(.title)
        }
        // 增加這一行
        .ignoresSafeArea(.all)
    }
}

結語

到這裡就是在 SwiftUI 該如何使用 ignoresSafeArea 。如果有疑問、回饋，歡迎留言討論～

那今天的 SwiftUI 的大大小小就到這邊，以上，明天見！

環境

• Xcode 15 beta 8

本篇使用到的 UI 元件和 modifiers 基本上沒有受到版本更新影響

因此 Xcode 14 等環境下使用也是沒問題的。